<template>
  <div :style="{ height: containerHeigth }" @scroll="handleScroll" ref="div" class="container" v-if="ListData.length">
    <div class="list" ref="listRef" :style="{ top: listTop }">
      <template v-for="(item, index) in ListData" :key="index">
        <dl @click="$emit('doctorList', item)">
          <dt>
            <img :src="item.doctorimage" alt=""
              style="width:60px;height:60px;border-radius: 50px;border: 1px solid #000;">
          </dt>
          <dd>
            <div class="doctor">
              <h3>{{ item.doctorname }}</h3>
              <p>主治医师</p>
              <span>{{ item.socolv }}</span>
            </div>
            <div class="van-ellipsis" style="line-height: 30px;background-color: #fff;">{{ item.doctorcity
              }}{{ item.doctorstate }}&ensp;{{ item.doctoradministre }}
            </div>
            <div class="button">
              <van-button size="mini"
                style="background: rgb(231, 240, 255); color: rgb( 30, 112, 255);border: none;">图片资讯</van-button>
              <van-button style="background: rgb(228, 247, 242); color: rgb( 45, 185, 139);border: none;"
                size="mini">电话咨询</van-button>
            </div>
            <div class="main-con">
              <van-text-ellipsis rows="2" :content="'擅长: ' + item.doctordescword" style="font-size: 14px;">
                <template #action="{ expanded }">{{ expanded ? ' V' : '^' }} </template>
              </van-text-ellipsis>
            </div>
            <div class="classitem">
              <div class="divitem">
                <p>好评率</p>
                <span>{{ item.doctorgood }}%</span>
              </div>
              <div class="divitem">
                <p>锦旗</p>
                <span>{{ item.doctoradmin }}</span>
              </div>
              <div class="divitem">
                <p>浏览人数</p>
                <span>{{ item.doctorbrowse }}</span>
              </div>
            </div>
            <div class="money">
              <div class="moneyitem">
                <span>￥</span>
                <p>{{ item.doctorprice }}</p>
                <span>起</span>
              </div>
              <van-button style="background-color:rgb(30, 111, 255) ;color: #fff;" size="small">问医生</van-button>
            </div>
          </dd>
        </dl>
      </template>
      <!-- 撑开元素高度 -->
      <div class="bar" :style="{ height: barHeigth }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {doctorState} from '@/interface/index' 
import axios from "axios";
import { ref, computed } from "vue";

const data = defineProps(['list'])
const num = ref(5)

const emit = defineEmits(['scrollTop', 'doctorList'])

//需要展示单条数据的高度
const size = 200;
//需要展示的起始下标
const start = ref(0);
// 需要展示数据的结束下标
const end = ref(10);
//每次渲染的节点个数
const shownum = 5;
//获取列表dom
const div = ref()
const listRef = ref()

const ListData = ref<doctorState[]>([])

axios.get('/api/doctor/list', { params: { pageCode: 1, pageSize: 10, admin: '妇产科' } }).then(res => {
  ListData.value = res.data.data
})

//容器的高度
const containerHeigth = computed(() => {
  return size * shownum + "px";
});
//撑开容器内容高度的元素高度
const barHeigth = computed(() => {
  return size * data.list.length + "px";
});
//列表项上滚动该表top值
const listTop = computed(() => {
  return start.value * size + "px";
});

function handleScroll() {
  //获取容器顶部滚动条的尺寸
  const scrollTop = div.value.scrollTop;
  //计算卷曲的数据条数，用计算的结果作为获取数据的起始和结束下标
  //起始的下标就是卷去的数据条数，向下取整
  start.value = Math.floor(scrollTop / size);
  //结束下标就是起始下标加上需要展示的数据条数
  end.value = start.value + shownum;
  ListData.value = data.list.slice(start.value, end.value);
  emit("scrollTop", listRef.value.style.top)
}
</script>

<style lang="scss">
.container {
  overflow-y: scroll;
  position: relative;
}

.list {
  position: absolute;
  top: 0;
  width: 100%;
}

dl {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  padding: 5px;


  dd {
    margin-left: 10px;

    .doctor {
      display: flex;
      align-items: center;

      p {
        padding: 5px;
      }

      span {
        font-size: 8px;
        background-color: rgb(1, 180, 136);
        color: #fff;
        padding: 2px;
        border-radius: 2px;
      }
    }

    .classitem {
      font-size: 12px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 5px;
      align-items: center;

      .divitem:last-child {
        border-right: none;
      }

      .divitem {
        width: 33%;
        display: flex;
        height: 20px;
        align-items: center;
        text-align: center;
        border-right: 1px solid #ccc;
        font-size: 10px;

        span {
          color: rgb(250, 100, 0);
          margin-left: 3px;

        }
      }
    }

    .money {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .moneyitem {
        display: flex;
        align-items: center;

        span {
          font-size: 12px;
          color: rgb(250, 100, 0);
        }

        p {
          font-size: 20px;
          color: rgb(250, 100, 0);
          padding: 3px;
        }

        span:last-child {
          color: rgb(89, 89, 89);
        }
      }
    }
  }
}
</style>
